<template>
  <div class="profile-bg">
    <div class="profile-header">
      <img class="bg-img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fc211f147-9bc8-41ae-9d43-eb6894321293%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1754441499&t=39f4d4a953dd651b722f46a7c2c0706d" />
      <div class="profile-info">
        <img class="avatar" :src="user.avatar" />
        <div class="nickname-row">
          <span class="nickname">{{ user.name }}</span>
          <span class="vip">VIP ￥7.9开通</span>
        </div>
        <div class="sign">{{ user.sign }}</div>
        <div class="tags">
          <span class="tag">村龄{{ user.years }}年</span>
          <span class="tag gender">♂</span>
        </div>
        <div class="stats">
          <span> <b>{{ user.follows }}</b> 关注 </span>
          <span> <b>{{ user.fans }}</b> 粉丝 </span>
          <span> Lv.{{ user.level }} </span>
          <span> {{ user.listenHours }} 小时 </span>
        </div>
      </div>
    </div>
    <div class="profile-funcs">
      <div class="func-btn" v-for="item in funcList" :key="item.text" @click="handleFuncClick(item)">
        <van-icon :name="item.icon" />
        <div>{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const user = {
  avatar: 'https://img0.baidu.com/it/u=3631403597,4116347853&fm=253&app=138&f=JPEG?w=500&h=500',
  name: '李根',
  sign: 'Students with a wide range of interests.',
  years: 11,
  follows: 520,
  fans: 8653,
  level: 6,
  listenHours: 443
}

const funcList = [
  { icon: 'clock-o', text: '最近', path: '/recentplay' },
  { icon: 'down', text: '本地', path: '/localmusic' },
  { icon: 'link-o', text: '网盘', path: '/clouddisk' },
  { icon: 'friends-o', text: '装扮', path: '/profile' },
  { icon: 'apps-o', text: '更多', path: '/profile' }
]

const handleFuncClick = (item) => {
  if (item.path) {
    router.push(item.path);
  }
}
</script>
<style scoped>
.profile-bg {
  min-height: 100vh;
  background: #181c24;
  color: #fff;
}
.profile-header {
  position: relative;
  padding-bottom: 24px;
}
.bg-img {
  width: 100vw;
  height: 220px;
  object-fit: cover;
  filter: brightness(0.5) blur(2px);
  position: absolute;
  top: 0; left: 0; z-index: 1;
}
.profile-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 38px;
}
.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.nickname-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.nickname {
  font-size: 22px;
  font-weight: bold;
}
.vip {
  background: #444;
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  padding: 2px 10px;
  margin-left: 6px;
}
.sign {
  margin-top: 8px;
  color: #ccc;
  font-size: 15px;
}
.tags {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.tag {
  background: #222;
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  padding: 2px 10px;
}
.gender {
  background: #3a7afe;
}
.stats {
  margin-top: 14px;
  display: flex;
  gap: 18px;
  font-size: 14px;
  color: #eee;
}
.stats b {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.profile-funcs {
  display: flex;
  justify-content: space-around;
  background: #23262e;
  border-radius: 12px;
  margin: 18px 16px 0 16px;
  padding: 18px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.func-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 14px;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.func-btn:hover {
  transform: scale(1.05);
}

.func-btn:active {
  transform: scale(0.95);
}

.func-btn .van-icon {
  font-size: 22px;
}
</style> 